<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创意案例展示</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CBCB',
            dark: '#1D2939',
            light: '#F9FAFB',
            muted: '#667085'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-balance {
        text-wrap: balance;
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
      }
      .animate-fade-in {
        animation: fadeIn 0.5s ease-in-out;
      }
      .animate-slide-up {
        animation: slideUp 0.5s ease-out;
      }
      .animate-slide-in {
        animation: slideIn 0.4s ease-out;
      }
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes slideUp {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    
    @keyframes slideIn {
      from { transform: translateX(20px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
  <!-- 导航栏 -->
  <header class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <div class="flex items-center">
          <a href="#" class="text-primary font-bold text-xl flex items-center">
            <i class="fa fa-cube mr-2"></i>
            <span>创意案例库</span>
          </a>
        </div>
        
        <!-- 桌面导航 -->
        <nav class="hidden md:flex space-x-8">
          <a href="#" class="text-primary font-medium">首页</a>
          <a href="#" class="text-muted hover:text-primary transition-colors">案例分类</a>
          <a href="#" class="text-muted hover:text-primary transition-colors">关于我们</a>
          <a href="#" class="text-muted hover:text-primary transition-colors">联系咨询</a>
        </nav>
        
        <!-- 移动端菜单按钮 -->
        <div class="md:hidden">
          <button type="button" class="text-gray-500 hover:text-primary" id="menu-toggle">
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div class="md:hidden hidden bg-white border-t animate-fade-in" id="mobile-menu">
      <div class="container mx-auto px-4 py-3 space-y-2">
        <a href="#" class="block py-2 text-primary font-medium">首页</a>
        <a href="#" class="block py-2 text-muted hover:text-primary transition-colors">案例分类</a>
        <a href="#" class="block py-2 text-muted hover:text-primary transition-colors">关于我们</a>
        <a href="#" class="block py-2 text-muted hover:text-primary transition-colors">联系咨询</a>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- 页面标题 -->
    <div class="mb-12 text-center animate-fade-in">
      <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-4">精选创意案例</h1>
      <p class="text-muted max-w-2xl mx-auto text-lg">探索我们精心挑选的成功案例，展示创新思维与卓越执行力的完美结合</p>
    </div>
    
    <!-- 案例筛选 -->
    <div class="mb-10 animate-slide-up" style="animation-delay: 0.1s">
      <div class="flex flex-wrap gap-2 justify-center">
        <button class="px-4 py-2 bg-primary text-white rounded-full text-sm font-medium">全部案例</button>
        <button class="px-4 py-2 bg-white text-muted hover:bg-primary/5 rounded-full text-sm font-medium transition-colors">品牌设计</button>
        <button class="px-4 py-2 bg-white text-muted hover:bg-primary/5 rounded-full text-sm font-medium transition-colors">产品开发</button>
        <button class="px-4 py-2 bg-white text-muted hover:bg-primary/5 rounded-full text-sm font-medium transition-colors">数字营销</button>
        <button class="px-4 py-2 bg-white text-muted hover:bg-primary/5 rounded-full text-sm font-medium transition-colors">用户体验</button>
        <button class="px-4 py-2 bg-white text-muted hover:bg-primary/5 rounded-full text-sm font-medium transition-colors">空间设计</button>
      </div>
    </div>
    
    <!-- 案例列表和详情区域 -->
    <div class="flex flex-col lg:flex-row gap-8">
      <!-- 案例列表区域 -->
      <div class="lg:w-2/3 space-y-6" id="cases-container">
        <!-- 案例1 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover case-card animate-slide-up" style="animation-delay: 0.2s" data-id="1">
          <div class="md:flex">
            <div class="md:w-1/2">
              <img src="https://picsum.photos/id/26/800/600" alt="智能家居APP界面设计" class="w-full h-64 md:h-full object-cover">
            </div>
            <div class="md:w-1/2 p-6">
              <span class="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-3">用户体验</span>
              <h3 class="text-xl font-bold mb-2">智能家居APP界面设计</h3>
              <p class="text-muted mb-4 line-clamp-3">为领先智能家居品牌打造的全平台控制中心，通过直观的界面设计和流畅的交互体验，让用户轻松管理家中所有智能设备。</p>
              <div class="flex justify-between items-center">
                <span class="text-sm text-muted"><i class="fa fa-calendar-o mr-1"></i> 2023年6月</span>
                <button class="text-primary font-medium hover:text-primary/80 transition-colors view-details">查看详情 <i class="fa fa-arrow-right ml-1"></i></button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 案例2 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover case-card animate-slide-up" style="animation-delay: 0.3s" data-id="2">
          <div class="md:flex">
            <div class="md:w-1/2">
              <img src="https://picsum.photos/id/28/800/600" alt="环保品牌视觉识别系统" class="w-full h-64 md:h-full object-cover">
            </div>
            <div class="md:w-1/2 p-6">
              <span class="inline-block px-3 py-1 bg-secondary/10 text-secondary text-xs font-medium rounded-full mb-3">品牌设计</span>
              <h3 class="text-xl font-bold mb-2">环保品牌视觉识别系统</h3>
              <p class="text-muted mb-4 line-clamp-3">为新兴环保企业创建的全套品牌视觉识别系统，包括标志、色彩系统、字体规范和应用指南，传达品牌的可持续发展理念。</p>
              <div class="flex justify-between items-center">
                <span class="text-sm text-muted"><i class="fa fa-calendar-o mr-1"></i> 2023年4月</span>
                <button class="text-primary font-medium hover:text-primary/80 transition-colors view-details">查看详情 <i class="fa fa-arrow-right ml-1"></i></button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 案例3 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover case-card animate-slide-up" style="animation-delay: 0.4s" data-id="3">
          <div class="md:flex">
            <div class="md:w-1/2">
              <img src="https://picsum.photos/id/3/800/600" alt="健康管理平台开发" class="w-full h-64 md:h-full object-cover">
            </div>
            <div class="md:w-1/2 p-6">
              <span class="inline-block px-3 py-1 bg-green-100 text-green-600 text-xs font-medium rounded-full mb-3">产品开发</span>
              <h3 class="text-xl font-bold mb-2">健康管理平台开发</h3>
              <p class="text-muted mb-4 line-clamp-3">集健康数据追踪、个性化建议和在线咨询于一体的综合性健康管理平台，帮助用户实现健康生活方式的数字化管理。</p>
              <div class="flex justify-between items-center">
                <span class="text-sm text-muted"><i class="fa fa-calendar-o mr-1"></i> 2023年2月</span>
                <button class="text-primary font-medium hover:text-primary/80 transition-colors view-details">查看详情 <i class="fa fa-arrow-right ml-1"></i></button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 案例4 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover case-card animate-slide-up" style="animation-delay: 0.5s" data-id="4">
          <div class="md:flex">
            <div class="md:w-1/2">
              <img src="https://picsum.photos/id/42/800/600" alt="新零售品牌数字营销" class="w-full h-64 md:h-full object-cover">
            </div>
            <div class="md:w-1/2 p-6">
              <span class="inline-block px-3 py-1 bg-purple-100 text-purple-600 text-xs font-medium rounded-full mb-3">数字营销</span>
              <h3 class="text-xl font-bold mb-2">新零售品牌数字营销</h3>
              <p class="text-muted mb-4 line-clamp-3">为快时尚品牌打造的全渠道数字营销策略，通过社交媒体、KOL合作和内容营销，实现品牌知名度提升和销售转化。</p>
              <div class="flex justify-between items-center">
                <span class="text-sm text-muted"><i class="fa fa-calendar-o mr-1"></i> 2022年11月</span>
                <button class="text-primary font-medium hover:text-primary/80 transition-colors view-details">查看详情 <i class="fa fa-arrow-right ml-1"></i></button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 分页 -->
        <div class="flex justify-center mt-8 animate-slide-up" style="animation-delay: 0.6s">
          <nav class="inline-flex rounded-md shadow-sm">
            <a href="#" class="px-3 py-2 text-muted border border-gray-300 rounded-l-md bg-white hover:bg-gray-50">
              <i class="fa fa-chevron-left"></i>
            </a>
            <a href="#" class="px-4 py-2 text-primary border-t border-b border-gray-300 bg-primary/5 font-medium">1</a>
            <a href="#" class="px-4 py-2 text-muted border-t border-b border-gray-300 bg-white hover:bg-gray-50">2</a>
            <a href="#" class="px-4 py-2 text-muted border-t border-b border-gray-300 bg-white hover:bg-gray-50">3</a>
            <a href="#" class="px-3 py-2 text-muted border border-gray-300 rounded-r-md bg-white hover:bg-gray-50">
              <i class="fa fa-chevron-right"></i>
            </a>
          </nav>
        </div>
      </div>
      
      <!-- 案例详情区域 (默认隐藏) -->
      <div class="lg:w-1/3 hidden" id="case-detail">
        <div class="sticky top-24 bg-white rounded-xl shadow-lg overflow-hidden animate-slide-in">
          <!-- 关闭按钮 -->
          <div class="p-4 flex justify-end">
            <button id="close-detail" class="text-muted hover:text-dark transition-colors">
              <i class="fa fa-times text-xl"></i>
            </button>
          </div>
          
          <!-- 详情内容 -->
          <div class="p-6 pt-0">
            <div id="detail-content">
              <!-- 详情内容将通过JavaScript动态填充 -->
            </div>
            
            <!-- 联系按钮 -->
            <div class="mt-8">
              <button class="w-full py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors flex items-center justify-center">
                <i class="fa fa-envelope-o mr-2"></i> 咨询此案例
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  
  <!-- 页脚 -->
  <footer class="bg-dark text-white mt-20">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h3 class="text-xl font-bold mb-4 flex items-center">
            <i class="fa fa-cube mr-2"></i>
            创意案例库
          </h3>
          <p class="text-gray-400 mb-4">展示创新设计与开发的精品案例，为您提供灵感与参考。</p>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-weibo"></i></a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-wechat"></i></a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-instagram"></i></a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-linkedin"></i></a>
          </div>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-4">快速链接</h4>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">案例分类</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系咨询</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-4">案例分类</h4>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">品牌设计</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">产品开发</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">数字营销</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">用户体验</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-4">联系我们</h4>
          <ul class="space-y-2">
            <li class="flex items-start">
              <i class="fa fa-map-marker mt-1 mr-3 text-gray-400"></i>
              <span class="text-gray-400">北京市朝阳区创意园区A座101室</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-phone mr-3 text-gray-400"></i>
              <span class="text-gray-400">400-123-4567</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-envelope-o mr-3 text-gray-400"></i>
              <span class="text-gray-400">contact@cases.com</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-500">
        <p>© 2023 创意案例库 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 案例数据
    const casesData = [
      {
        id: 1,
        title: "智能家居APP界面设计",
        category: "用户体验",
        categoryColor: "bg-primary/10 text-primary",
        date: "2023年6月",
        image: "https://picsum.photos/id/26/800/600",
        description: "为领先智能家居品牌打造的全平台控制中心，通过直观的界面设计和流畅的交互体验，让用户轻松管理家中所有智能设备。",
        details: `
          <img src="https://picsum.photos/id/26/800/600" alt="智能家居APP界面设计" class="w-full h-48 object-cover rounded-lg mb-4">
          <span class="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-3">用户体验</span>
          <h2 class="text-2xl font-bold mb-4">智能家居APP界面设计</h2>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">项目背景</h3>
            <p class="text-muted">客户是一家领先的智能家居设备制造商，需要一款能够整合其全系列产品的控制应用，实现用户对家居设备的统一管理。</p>
          </div>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">挑战</h3>
            <p class="text-muted">如何在保持界面简洁的同时，支持多种不同类型设备的复杂控制功能，并且确保不同年龄段用户都能轻松上手。</p>
          </div>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">解决方案</h3>
            <p class="text-muted mb-3">我们采用了模块化设计理念，将不同类型的设备控制功能进行分类，通过直观的可视化界面呈现设备状态和控制选项。</p>
            <ul class="text-muted space-y-1 pl-5 list-disc">
              <li>设计了基于场景的控制模式，用户可一键切换"回家"、"离家"、"睡眠"等场景</li>
              <li>实现了设备之间的联动逻辑，例如"开门时自动开灯"</li>
              <li>加入了AI学习功能，根据用户习惯自动调整设备运行状态</li>
            </ul>
          </div>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">成果</h3>
            <p class="text-muted">应用上线后，用户活跃度提升了42%，客户产品销量增长了28%，在应用商店获得了4.8分的高分评价。</p>
          </div>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">项目周期</h3>
            <p class="text-muted">3个月（从需求分析到正式上线）</p>
          </div>
        `
      },
      {
        id: 2,
        title: "环保品牌视觉识别系统",
        category: "品牌设计",
        categoryColor: "bg-secondary/10 text-secondary",
        date: "2023年4月",
        image: "https://picsum.photos/id/28/800/600",
        description: "为新兴环保企业创建的全套品牌视觉识别系统，包括标志、色彩系统、字体规范和应用指南，传达品牌的可持续发展理念。",
        details: `
          <img src="https://picsum.photos/id/28/800/600" alt="环保品牌视觉识别系统" class="w-full h-48 object-cover rounded-lg mb-4">
          <span class="inline-block px-3 py-1 bg-secondary/10 text-secondary text-xs font-medium rounded-full mb-3">品牌设计</span>
          <h2 class="text-2xl font-bold mb-4">环保品牌视觉识别系统</h2>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">项目背景</h3>
            <p class="text-muted">一家专注于可降解材料研发与生产的新兴企业，需要建立一套完整的品牌视觉识别系统，以传达其环保、创新的品牌理念。</p>
          </div>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">设计理念</h3>
            <p class="text-muted">以"自然与科技的融合"为核心设计理念，通过有机形态与几何结构的结合，体现品牌将自然环保理念与先进科技相结合的特点。</p>
          </div>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">设计成果</h3>
            <ul class="text-muted space-y-2 pl-5 list-disc">
              <li>设计了以绿叶与分子结构为灵感的品牌标志</li>
              <li>建立了以自然绿为主色调，科技蓝为辅助色的色彩系统</li>
              <li>制定了品牌字体规范，包括标题字体和正文字体</li>
              <li>设计了包装系统、办公物料和宣传材料</li>
            </ul>
          </div>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">品牌影响</h3>
            <p class="text-muted">新品牌形象推出后，帮助企业在行业展会中脱颖而出，获得了3家大型零售商的合作意向，品牌认知度在目标群体中提升了65%。</p>
          </div>
        `
      },
      {
        id: 3,
        title: "健康管理平台开发",
        category: "产品开发",
        categoryColor: "bg-green-100 text-green-600",
        date: "2023年2月",
        image: "https://picsum.photos/id/3/800/600",
        description: "集健康数据追踪、个性化建议和在线咨询于一体的综合性健康管理平台，帮助用户实现健康生活方式的数字化管理。",
        details: `
          <img src="https://picsum.photos/id/3/800/600" alt="健康管理平台开发" class="w-full h-48 object-cover rounded-lg mb-4">
          <span class="inline-block px-3 py-1 bg-green-100 text-green-600 text-xs font-medium rounded-full mb-3">产品开发</span>
          <h2 class="text-2xl font-bold mb-4">健康管理平台开发</h2>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">项目概述</h3>
            <p class="text-muted">开发一个整合健康数据追踪、个性化健康建议和专业医生咨询的综合性平台，帮助用户科学管理自身健康状况。</p>
          </div>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">核心功能</h3>
            <ul class="text-muted space-y-2 pl-5 list-disc">
              <li>健康数据采集与可视化（体重、血压、运动等）</li>
              <li>基于AI算法的个性化健康分析与建议</li>
              <li>在线医生咨询与预约系统</li>
              <li>健康目标设定与进度追踪</li>
              <li>健康知识库与定制化内容推荐</li>
            </ul>
          </div>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">技术架构</h3>
            <p class="text-muted mb-2">采用前后端分离架构，确保系统的可扩展性和用户体验：</p>
            <ul class="text-muted space-y-1 pl-5 list-disc">
              <li>前端：React + Redux，响应式设计支持多终端</li>
              <li>后端：Node.js + Express，RESTful API设计</li>
              <li>数据库：MongoDB存储用户数据，Redis缓存热点数据</li>
              <li>AI分析：基于TensorFlow构建健康预测模型</li>
            </ul>
          </div>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">运营数据</h3>
            <p class="text-muted">平台上线6个月后，注册用户突破10万，日均活跃用户3万，用户满意度达92%，医生咨询转化率为15%。</p>
          </div>
        `
      },
      {
        id: 4,
        title: "新零售品牌数字营销",
        category: "数字营销",
        categoryColor: "bg-purple-100 text-purple-600",
        date: "2022年11月",
        image: "https://picsum.photos/id/42/800/600",
        description: "为快时尚品牌打造的全渠道数字营销策略，通过社交媒体、KOL合作和内容营销，实现品牌知名度提升和销售转化。",
        details: `
          <img src="https://picsum.photos/id/42/800/600" alt="新零售品牌数字营销" class="w-full h-48 object-cover rounded-lg mb-4">
          <span class="inline-block px-3 py-1 bg-purple-100 text-purple-600 text-xs font-medium rounded-full mb-3">数字营销</span>
          <h2 class="text-2xl font-bold mb-4">新零售品牌数字营销</h2>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">品牌挑战</h3>
            <p class="text-muted">一个新兴快时尚品牌面临市场竞争激烈、品牌知名度低的问题，需要通过数字营销提升品牌影响力并带动销售增长。</p>
          </div>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">营销策略</h3>
            <p class="text-muted mb-2">我们制定了"内容+社交+转化"的全链路营销策略：</p>
            <ul class="text-muted space-y-2 pl-5 list-disc">
              <li>品牌故事内容创作，突出"环保时尚"的品牌理念</li>
              <li>社交媒体矩阵运营，重点布局小红书、抖音和微博</li>
              <li>KOL分层合作，头部网红造势+腰部网红深耕+素人扩散</li>
              <li>线上线下活动联动，提升用户参与感和品牌体验</li>
              <li>精准广告投放，提高流量转化效率</li>
            </ul>
          </div>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">创新亮点</h3>
            <p class="text-muted mb-2">推出"穿搭AI助手"小程序，用户上传照片即可获得品牌服装搭配建议，实现了：</p>
            <ul class="text-muted space-y-1 pl-5 list-disc">
              <li>提升用户互动体验，平均使用时长8分钟</li>
              <li>降低购买决策门槛，搭配推荐转化率达23%</li>
              <li>收集用户偏好数据，优化产品设计和营销策略</li>
            </ul>
          </div>
          
          <div class="mb-6">
            <h3 class="font-semibold text-lg mb-2">营销效果</h3>
            <p class="text-muted">3个月营销周期内，品牌社交媒体粉丝增长200万+，线上销售额提升180%，品牌搜索量增长320%，用户复购率达35%。</p>
          </div>
        `
      }
    ];
    
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 移动端菜单切换
      const menuToggle = document.getElementById('menu-toggle');
      const mobileMenu = document.getElementById('mobile-menu');
      
      menuToggle.addEventListener('click', function() {
        mobileMenu.classList.toggle('hidden');
      });
      
      // 导航栏滚动效果
      const navbar = document.getElementById('navbar');
      window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
          navbar.classList.add('shadow-md');
          navbar.classList.remove('shadow-sm');
        } else {
          navbar.classList.remove('shadow-md');
          navbar.classList.add('shadow-sm');
        }
      });
      
      // 案例详情查看功能
      const casesContainer = document.getElementById('cases-container');
      const caseDetail = document.getElementById('case-detail');
      const detailContent = document.getElementById('detail-content');
      const closeDetail = document.getElementById('close-detail');
      const viewDetailsButtons = document.querySelectorAll('.view-details');
      
      // 查看详情按钮点击事件
      viewDetailsButtons.forEach(button => {
        button.addEventListener('click', function() {
          const caseCard = this.closest('.case-card');
          const caseId = parseInt(caseCard.dataset.id);
          const caseData = casesData.find(item => item.id === caseId);
          
          if (caseData) {
            // 填充详情内容
            detailContent.innerHTML = caseData.details;
            
            // 显示详情区域，隐藏列表（在移动视图）
            caseDetail.classList.remove('hidden');
            
            // 在移动视图下，滚动到详情区域
            if (window.innerWidth < 1024) {
              caseDetail.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
          }
        });
      });
      
      // 关闭详情按钮点击事件
      closeDetail.addEventListener('click', function() {
        caseDetail.classList.add('hidden');
        
        // 在移动视图下，滚动回案例列表顶部
        if (window.innerWidth < 1024) {
          casesContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
      
      // 响应式处理：窗口大小改变时
      window.addEventListener('resize', function() {
        // 在桌面视图下，始终显示列表区域
        if (window.innerWidth >= 1024) {
          casesContainer.classList.remove('hidden');
        } else if (caseDetail.classList.contains('hidden')) {
          // 在移动视图且详情隐藏时，显示列表
          casesContainer.classList.remove('hidden');
        } else {
          // 在移动视图且详情显示时，隐藏列表
          casesContainer.classList.add('hidden');
        }
      });
      
      // 初始化响应式状态
      if (window.innerWidth < 1024) {
        casesContainer.classList.remove('hidden');
      }
    });
  </script>
</body>
</html>
